<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html xml:lang="en" lang="en">

<head>
    <title>frameline</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="js/canvas.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

    <div id="wrapper" >
        <div id="logo">
            <h1><--frameline--></h1>
        </div>
        <div id="menu">

            <p>
                <a>Pen color:</a>
                <a id="preview" >&nbsp&nbsp&nbsp</a>
                <a id="animate" class="megaweb">Send Image OK!</a>
            </p>

            <button type="button" onclick="tp.setColor('Red')" class="color red small button" "><i><b>Red</i></b></button>
            <button type="button" onclick="tp.setColor('DeepPink')" class="color pink small button" "><i><b>DeepPink</i></b></button>
            <button type="button" onclick="tp.setColor('DarkOrange')" class="color orange small button" "><i><b>DarkOrange</i></b></button>
            <button type="button" onclick="tp.setColor('Yellow')" class="color yellow small button" "><i><b>Yellow</i></b></button>
            <button type="button" onclick="tp.setColor('DarkViolet')" class="color violet small button" "><i><b>DarkViolet</i></b></button>
            <button type="button" onclick="tp.setColor('Lime')" class="color green small button" "><i><b>Lime</i></b></button>
            <button type="button" onclick="tp.setColor('Blue')" class="color blue small button" "><i><b>Blue</i></b></button>
            <button type="button" onclick="tp.setColor('Brown')" class="color brown small button" "><i><b>Brown</i></b></button>
            <button type="button" onclick="tp.setColor('White')" class="color white small button" "><i><b>White</i></b></button>
            <button type="button" onclick="tp.setColor('Black')" class="color black small button" "><i><b>Black</i></b></button>

            <p><a>Background color:</a></p>
            <button type="button" onclick="tp.clear('Red')" class="color red small button" "><i><b>Red</i></b></button>
            <button type="button" onclick="tp.clear('DeepPink')" class="color pink small button" "><i><b>DeepPink</i></b></button>
            <button type="button" onclick="tp.clear('DarkOrange')" class="color orange small button" "><i><b>DarkOrange</i></b></button>
            <button type="button" onclick="tp.clear('Yellow')" class="color yellow small button" "><i><b>Yellow</i></b></button>
            <button type="button" onclick="tp.clear('DarkViolet')" class="color violet small button" "><i><b>DarkViolet</i></b></button>
            <button type="button" onclick="tp.clear('Lime')" class="color green small button" "><i><b>Lime</i></b></button>
            <button type="button" onclick="tp.clear('Blue')" class="color blue small button" "><i><b>Blue</i></b></button>
            <button type="button" onclick="tp.clear('Brown')" class="color brown small button" "><i><b>Brown</i></b></button>
            <button type="button" onclick="tp.clear('White')" class="color white small button" "><i><b>White</i></b></button>
            <button type="button" onclick="tp.clear('Black')" class="color black small button" "><i><b>Black</i></b></button>

            <p>
                <a>Pen size:</a>
                    <button type="button" onclick="tp.setStrokeSize(5)" class="color black small button" "><i><b>1X</i></b></button>
                    <button type="button" onclick="tp.setStrokeSize(7)" class="color black small button" "><i><b>2X</i></b></button>
                    <button type="button" onclick="tp.setStrokeSize(9)" class="color black small button" "><i><b>3X</i></b></button>
                <a>&nbsp Image file (640px by 480px):</a>
                    <input type='file' class ="color black small button" id='upload'>
            </p>

            <p>
                <a>Control:&nbsp</a>
                <button type="button" onclick="Undo()" class="color black small button" ><i><b>&nbsp&nbsp&nbsp&nbspUndo&nbsp&nbsp&nbsp&nbsp</i></b></button>
                <button type="button" onclick="Redo()" class="color black small button" ><i><b>&nbsp&nbsp&nbsp&nbspRedo&nbsp&nbsp&nbsp&nbsp</i></b></button>
                <button type="button" onclick="canvasLoadImageFromServer()" class="color black small button" ><i><b>&nbsp&nbsp&nbsp&nbspLoadFromTheServer&nbsp&nbsp&nbsp&nbsp</i></b></button>
                <a>&nbsp Send image to frame:</a>
                <button type="button" class="color black small button" id="send"><i><b>&nbsp&nbsp&nbsp&nbspSend&nbsp&nbsp&nbsp&nbsp</i></b></button>
            </p>
        </div>
        <div id="fixed">
            <div id="sketch">
                <!canvas id="paint">
                <!/canvas>

                <canvas id="paint" width="320" height="240" class="no-copy" >
                </canvas>
            </div>
        </div>
        <p>
            kruta16
        </p>
    </div>

</body>
    <script type="text/javascript">
       // Canva.init('#paint');

       window.tp = new TouchPaint( "paint", {} );
       tp.clear('Brown');
       tp.setColor('Black');

        // Attach event listener
        document.getElementById('upload').addEventListener('change', doUpload);

           // Upload image to sever
        document.getElementById("send").addEventListener("click",
            function()
            {
                var canvas = document.getElementById('paint');
                var context = canvas.getContext('2d');
                var dataUrl = canvas.toDataURL("image/png");
                $.ajax({
                    type: "POST",
                    url: "/php/save_image.php",
                    data: {
                        imgBase64: dataUrl
                    }
                }).done(function(msg) {
                        console.log('saved');
                        // Do Any thing you want
                    });

                $('.megaweb').each(function(){
                    $(this).animate({opacity:'1.0'},1);
                    $(this).animate({opacity:'1.0'},1);
                    $(this).stop().animate({opacity:'0.0'},3600);
                });
            });

    </script>
 </html>
